<template>
  <div>
    
    <div style=" width: 1265px; height: 50px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <span class="demonstration" style="font-size: 20px;margin-left: 10px; margin-top: 20px;">请选择楼栋:</span>
        <el-cascader required
            style="width: 20%; margin-left: 10px; margin-top: 7px;"
            v-model="blockAndBuilding"
            :options="options"
            @change="handleChange"
            >
     </el-cascader>
     <el-button type="primary" style="margin-left: 20px;" icon="el-icon-search" @click="search">查询</el-button>
    </div>
    <div style="display: flex; margin-top: 20px; margin-left: 10px;">
        <li style="color: #909399; margin-left: 30px;"><span style="color: black;margin-left: -10px;">空置</span></li>
        <li style="color: #409EFF; margin-left: 40px;"><span style="color: black;margin-left: -10px;">已出租</span></li>
        <li style="color: #67C23A; margin-left: 40px;"><span style="color: black;margin-left: -10px;">已出售</span></li>
        <li style="color: #E6A23C; margin-left: 40px;"><span style="color: black;margin-left: -10px;">即将到期</span></li>
        <li style="color: #F56C6C; margin-left: 40px;"><span style="color: black;margin-left: -10px;">租约逾期</span></li>
    </div>
    <div style="display: flex; margin-top: 20px; margin-left: 20px;width: 1200px;" v-for="o in 10" :key="o">
            <div style="width: 200px; margin-top: 15px;">
                <el-card class="box-card" style="width: 64px; height: 64px;">
                    <span>{{o}}层</span>
                </el-card>
            </div>
            <div style="display: flex; flex-wrap: wrap; margin-left: 15px;">
                <el-card class="box-card" style="height: 100px; margin-left: 20px; 
                    margin-top: 15px;" v-for=" (item,index) in listHouse[o-1][o]" :key="index"
                    :body-style="{backgroundColor: '#fff',} " :style="{ backgroundColor: getColorByItem(item),width:'250px'}"
                     >
                    <div slot="header" class="clearfix" style="height: 0; line-height: 0px;">
                        {{tableData[item].name}}({{parseFloat(tableData[item].buildingSquare).toFixed(2)}}㎡)
                    </div>
                    <div style="margin-top: -10px;">
                        {{tableData[item].stateCompany}}
                        <br>
                        <span v-if="tableData[item].state==='已出租'">{{tableData[item].stateEndTime}}到期</span>
                        <span v-else>{{tableData[item].state}}</span>
                    </div>
                </el-card>
            </div>
    </div>
     
  </div>
</template>

<script>
import moment from "moment"
export default {
    data() {
        return {
            blockAndBuilding:[],
            options:[],
            date1:moment().format('YYYY-MM-DD'),
            tableData:[],
            tableDataTemp:[],
            listHouse:[]
        }
    },
    methods:{
        //查询街道
        selectHouseBlock(){
              this.$http.get(
                  "http://localhost:8080/houseBlock/selectHouseBlock",
                  {
                      params:{
                          pageNum:1,
                          pageSize:9999,
                          downTownNum:"",
                          downTownName:""
                      }
                  }
                  
              ).then((result) => {
                  var $data=result.data;
                  this.listBlocks=$data.data.list;
                  console.log(this.listBlocks)
              }).catch((err) => {
              });
          },   
          //查询楼栋
        selectBuilding(){
            this.$http.get(
                "http://localhost:8080/building/selectBuilding",
                {
                    params:{
                      pageNum:1,
                      pageSize:9999,
                    }
                }
                
            ).then((result) => {
                var $data=result.data;
                this.listBuildings=$data.data.list;
                //获取整合好的集合
                for(let i=0;i<this.listBlocks.length;i++){
                    var  map={};
                    map['label']=this.listBlocks[i].name;
                    map['value']=this.listBlocks[i].name;
                    var list1=[];
                        for(let j=0;j<this.listBuildings.length;j++){
                            var map1={};
                            if(map.label==this.listBuildings[j].block){
                                map1['label']=this.listBuildings[j].name;
                                map1['value']=this.listBuildings[j].name;
                                list1.push(map1)
                            }
                        }
                    map.children=list1;
                    this.options.push(map)
                 }
            
            }).catch((err) => {
            });
        },
        search(){
            this.listHouse=[]; 
            this.tableDataTemp=[];
            for(let i=0;i<this.tableData.length;i++){
                if(this.tableData[i].block==this.blockAndBuilding[0],this.tableData[i].building==this.blockAndBuilding[1]){
                    this.tableDataTemp.push(this.tableData[i])
                }
            }
            console.log(this.tableDataTemp);
            this.getListHouse(this.tableDataTemp)
        },
        getColorByItem(item){
            // if()
            const colors = ['red', 'blue', 'green', 'yellow']; // 可根据需要定义颜色数组
            if(this.tableData[item].state=="已出租")
            {   const stateEndTime = moment(this.tableData[item].stateEndTime, 'YYYY-MM-DD').toDate();
                const currentDate = moment(this.date1, 'YYYY-MM-DD').toDate();
                if(this.date1<this.tableData[item].stateEndTime)
                {
                    if(stateEndTime.getTime()-currentDate.getTime()<2592000000)
                    return "#E6A23C";
                    else
                    return "#409EFF";
                }
                else{
                    return "#F56C6C";
                }
            }
            if(this.tableData[item].state=="已出售")
            {return "#67C23A";} 
            if(this.tableData[item].state=="空置")
            {return "#909399";}
        },
        //查询和搜索商铺
        selectHouse(inputName,inputState,pageNum,pageSize){
              this.$http.get(
                  "http://localhost:8080/house/selectHouse",
                  {
                      params:{
                        name:inputName,
                        state:inputState,
                        pageNum:pageNum,
                        pageSize:pageSize,
                      }
                  }
                  
              ).then((result) => {
                  var $data=result.data;
                  this.tableData=$data.data.list;
                  console.log(this.tableData);
                //   for(let i=1;i<=10;i++){
                //     var map={};
                //     var list=[];//存储楼层对应的单位
                //     for(let j=0;j<this.tableData.length;j++){
                //         if(this.tableData[j].floor==i){
                //             list.push(j);

                //         }
                //     }
                //     map[i]=list;
                //     this.listHouse.push(map)
                //   }
                this.getListHouse(this.tableData)
              }).catch((err) => {
              });
          },
          getListHouse(tableData){
            for(let i=1;i<=10;i++){
                    var map={};
                    var list=[];//存储楼层对应的单位
                    for(let j=0;j<tableData.length;j++){
                        if(tableData[j].floor==i){
                            list.push(j);
                        }
                    }
                    map[i]=list;
                    this.listHouse.push(map)
            }
        }
    },
    beforeMount(){
        this.selectHouseBlock();
        this.selectBuilding();
        this.selectHouse("","",1,9999);
    }
}
</script>

<style>
  
li::marker {
  font-size: 25px;
  margin-left: 10px;
}
/* .box-card .el-card__header {
  background-color: #409EFF;
  color: #fff;
} */
</style>